<script setup lang="ts">

</script>

<template>
  <div class="wrap">
    <h3>对于每个有明确行位置的网格项目（即 grid-row-start、grid-row-end 或 grid-row 明确放置的网格项目） 只确定行位置，但列的位置并没有确定。此时，网格项目将按照修改后的文档顺序放置。换句话说，为了确定没有明确设置的列的位置（即没有显式设置 grid-column-start grid-column-end grid-column 放置网格项目），算法根据下面的模式来处理: </h3>
    <ul>
      <li>稀疏算法（sparse）, 也是默认算：将其放置的列开始网格先设置为最早的（最小的正指数）网格索引值，以确保此网格项目区域不会与任何被占用的网格单元格重叠，如果一行无法放下就会新起一行来放置该项目</li>
      <li>密集算法（dense）: 将器放置的列开始网格线设置为最早的（最小的正指数）网格线索引值，以确保这个网格项目的网格区域不会与任何占用的网格单元格重叠。密集算法 也会另起一行，他们的区别应该是 密集算法在发现 后续放置的 网格项目能填入到网格洞的时候会优先将其放置到网格洞的位置</li>
    </ul>
    <section>
      <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        我是一个文本节点(TextNode)
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </section>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;

  section {
    .container {
      --width: 100%;

      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-columns: 80px;
      grid-auto-rows: 80px;

      width: var(--width);
      padding: 1rem;
      outline: 1px dashed #f36;
      counter-reset: item;
      font-family: "Bungee Shade", cursive;
      font-size: 1rem;
      text-shadow: 1px 1px rgb(0 0 0 / 0.5);

      &:before, &:after {
        content: '';
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #bbd7af;
        color: #000;

        box-shadow: inset 0px 0px 0px 3px rgb(159 86 181 / 50%);
        text-shadow: 1px 1px 0 rgb(255 255 255), -1px -1px 0 rgb(255 255 255);
        font-family: "Bungee Shade", cursive;
        font-size: 2rem;
      }
      &:before {
        content: 'Before';
      }

      &:after {
        content: 'After';
      }

      &:before {
        grid-row: 1 / 4;
        background-image: repeating-conic-gradient(
                from 7.5deg at 50% 0,
                transparent 0 15deg,
                #09f336 0 30deg
        ),
        linear-gradient(177deg, #f196f312, #f4433609);
        mix-blend-mode: overlay;
        background-blend-mode: screen;
        box-shadow: inset 0px 0px 0px 3px rgb(159 86 181 / 50%);
        text-shadow: 1px 1px 0 rgb(255 255 255 / 0.5);
      }

      ::v-deep(.item){
        counter-increment: item;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2c6;
        color: #000;
        position: relative;

        &:before {
          content: counter(item);
          font-family: "Bungee Shade", cursive;
          font-size: 3.5rem;
        }


        &:nth-child(1) {
          grid-area: 1 / 2 / 2 / 4;
        }
        &:nth-child(2) {
          grid-area: 2 / 1 / 4 / 3;
        }

        // nth-of-type 匹配同类型标签的下标
        &:nth-of-type(1) {
          background-color: #bbd7af;
        }
        &:nth-of-type(2) {
          background-color: #dac2f1;
        }

        &:nth-of-type(4){
          grid-row: 3 / 5;
          background-image: repeating-conic-gradient(
                  from 7.5deg at 50% 0,
                  transparent 0 15deg,
                  #09f336 0 30deg
          ),
          linear-gradient(177deg, #f196f312, #f4433609);
          mix-blend-mode: overlay;
          background-blend-mode: screen;
          box-shadow: inset 0px 0px 0px 3px rgb(159 86 181 / 50%);
          text-shadow: 1px 1px 0 rgb(255 255 255 / 0.5);
        }


        &:nth-of-type(3) {
          background-color: #ccf1c2;
        }
        &:nth-of-type(4) {
          background-color: #c2e9f1;
        }
        &:nth-of-type(5) {
          background-color: #9f10ae;
        }
        &:nth-of-type(6) {
          background-color: #f44336;
        }
        &:nth-of-type(7) {
          background-color: #2196f3;
        }
        &:nth-of-type(8) {
          background-color: #f196f3;
        }


      }
    }
  }
}
</style>
